<!--
 * @Author: HeAo
 * @Date: 2022-08-23 19:53:09
 * @LastEditTime: 2022-08-24 11:18:10
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \JavaScripe\day-12\03-节点方法.html
 * 别乱动！
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="d1">
    <div id="d2">我是d2标签</div>
  </div>

</body>
<script>
  // 新建一个节点
  var div1 = document.createElement('div')
  // 向该节点加入内容
  div1.innerHTML = '我是div1标签'
  // appendChild 将子节点添加到目标节点中(在末尾加入)
  document.body.appendChild(div1)

  // inserBefore —— 精准插入 在谁之前插入
  // var d2 = document.getElementById('d2')
  // // 获取d2的父节点
  // var parentDiv = d2.parentNode
  // var span1 = document.createElement('span')
  // span1.innerHTML = '我是span标签'
  // parentDiv.insertBefore(span1, d2)

  // // removeChild
  // var span2 = document.createElement('span')
  // span2.innerHTML = '我是span2标签'
  // document.body.insertBefore(span2, div1)
  // document.body.removeChild(span2)

  //  replaceChild
  var div2 = document.createElement('div')
  // 设置一下内容
  div2.innerHTML = '我是一个div2标签'
  document.body.replaceChild(div2, div1)

  // // cloneNode()  是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。
  var d1 = document.getElementById('d1')
  var p_prime = d1.cloneNode(false)
  console.log(p_prime);
</script>

</html>